<template>
  <div>
    <!-- 搜索框部分 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline" style="margin-right:57%">
          <el-form-item label="手机号码:">
            <el-input v-model="queryBlackList.phone" placeholder="请输入会员电话" style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item label="昵称:" style="margin-left:2%">
            <el-input v-model="queryBlackList.name" placeholder="请输入会员昵称" style="width: 180px"></el-input>
          </el-form-item>

          <el-form-item style="margin-left: 2%">
            <!--              搜索框-->
            <el-button icon="el-icon-search" circle @click="showBlackList()"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 表格部分 -->
    <el-row>
      <el-col :span="24">
        <el-table :data="blackList" stripe style="width: 100%;">
          <el-table-column prop="id" v-if="false">
          </el-table-column>
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="会员昵称" width="80" align="center">
          </el-table-column>
          <el-table-column prop="level" label="会员等级" width="50" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="140" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="开卡时间" width="120" :formatter='dateFormat' align="center">
          </el-table-column>
          <el-table-column prop="reRatio" label="退换货比例" width="120" align="center">
          </el-table-column>
          <el-table-column prop="customNumber" label="消费次数" width="80" align="center">
          </el-table-column>
          <el-table-column prop="customMoney" label="消费金额" width="120" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="120" align="center">
          </el-table-column>

          <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button type="success" round size="mini" @click="removeList(scope.row)">移出黑名单</el-button>
            </template>

          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination layout="prev, pager, next" @next-click="nextPage" @prev-click="prevClick"
                         @current-change="currentChange" :page-size=queryBlackList.pageSize
                         :page-count=queryBlackList.pageCount :current-page=queryBlackList.pageNo
                         :total=queryBlackList.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryBlackList: {
        phone: '', name: '',
        pageNo: 1,
        pageSize: 5,
        total: 0,
        pageCount: 1,
      },
      blackList: [],
    }
  },
  methods: {
    removeList(row){
      let jwt = localStorage.getItem("jwt");
      this.$axios.get('api/blackList/removeList?account='+row.account,{headers: {'jwt': jwt}}).then(res =>{
        console.log(res.data);
        if (res.data.code == 200){
          this.showBlackList();
          this.$message({
            type: 'success',
            message: '移出成功!'
          });
        }else{
          this.$message({
            type: 'info',
            message: '移出失败!'
          });
        }
      });
    },
    showBlackList() {
      let jwt = localStorage.getItem("jwt");
      this.$axios.post('api/blackList/showList', this.queryBlackList, {headers: {'jwt': jwt}}).then(res => {
        console.log(res.data.data.list);
        this.blackList = res.data.data.list;

        this.queryBlackList.pageNo = res.data.data.pageNum;
        this.queryBlackList.pageSize = res.data.data.pageSize;
        this.queryBlackList.total = res.data.data.total;
        this.queryBlackList.pageCount = res.data.data.pages;

      });
    },
    nextPage(pageNo) {
      this.queryBlackList.pageNo = pageNo;
      this.showBlackList();
    },
    prevClick(pageNo) {
      this.queryBlackList.pageNo = pageNo;
      this.showBlackList();
    },
    currentChange(pageNo) {
      this.queryBlackList.pageNo = pageNo;
      this.showBlackList();
    },
    dateFormat(row) {
      var t = new Date(row.createTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
    },
  },
  created: function () {
    this.showBlackList();
  }
}
</script>

<style scoped>

</style>